<template>
    <div class="flex-col justify-start items-start page">
      <div class="flex-row relative section">
        <img
            class="image pos"
            src="../../public/pic/背景1.png"
        />
        <div class="section_3 pos_8"></div>
        <div class="section_5 pos_12"></div>
        <div class="flex-row items-start group space-x-74 pos_5">
          <div class="flex-col justify-start items-center relative group_2">
            <img
                class="image_5"
                src="../../public/pic/背景2.png"
            />
            <img
                class="image_4 pos_6"
                src="../../public/pic/背景3.png"
            />
          </div>
          <div class="flex-col flex-auto group_7">
            <div class="flex-col justify-start items-start relative group_8">
              <img
                  class="image_11"
                  src="../../public/pic/背景4.png"
              />
              <img
                  class="image_10 pos_10"
                  src="../../public/pic/背景5.png"
              />
            </div>
            <div class="flex-col justify-start items-end relative group_8 view">
              <img
                  class="image_14"
                  src="../../public/pic/背景6.png"
              />
              <img
                  class="image_13 pos_13"
                  src="../../public/pic/背景7.png"
              />
            </div>
          </div>
        </div>
        <img
            class="image_6 pos_7"
            src="../../public/pic/背景8.png"
        />
        <img
            class="image_8 pos_9"
            src="../../public/pic/背景9.png"
        />
        <img
            class="image_2 pos_2"
            src="../../public/pic/背景10.png"
        />
        <img
            class="image_12 pos_11"
            src="../../public/pic/背景11.png"
        />
        <img
            class="image_3 pos_4"
            src="../../public/pic/背景main.png"
        />
        <div class="flex-col section_2 pos_3">
          <span class="self-center text">踏马管理系统登录</span>
          <div class="flex-col group_3">
            <div class="flex-row items-center group_4 space-x-12">
              <img
                  class="image_7"
                  src="../../public/pic/图标1.png"
              />
              <span class="font_1 text_2">用户名</span>
            </div>
            <div class="flex-row items-center group_5 space-x-12">
              <img
                  class="image_9"
                  src="../../public/pic/图标2.png"
              />
              <span class="font_1 text_3">密码</span>
            </div>
            <div class="flex-row justify-between items-center group_6">
              <div class="flex-row items-center space-x-4">
                <div class="shrink-0 section_4"></div>
                <span class="font_2 text_4">记住密码</span>
              </div>
              <span class="font_3 text_5">忘记密码？</span>
            </div>
          </div>
          <div class="flex-col justify-start items-center text-wrapper"><span class="text_6">登录</span></div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {

    };
  },

  methods: {


  },
};
</script>

<style scoped lang="css">
.page {
  background-color: #00000000;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}

.section {
  margin-left: -0.75rem;
  padding-left: 4.88rem;
  padding-right: 1.38rem;
  background-image: linear-gradient(0deg, #dbeafe 0%, #dbeafe 1%, #f4faff 100%);
  width: 122.13rem;
  height: 67.5rem;
}

.image {
  opacity: 0.47;
  width: 58.44rem;
  height: 67.5rem;
}

.pos {
  position: absolute;
  right: 1.38rem;
  bottom: 0;
}

.section_3 {
  background-color: #a9e5ff;
  width: 10.56rem;
  height: 9.63rem;
}

.pos_8 {
  position: absolute;
  left: 22.72rem;
  top: 24.63rem;
}

.section_5 {
  background-color: #b2cfff;
  width: 24.16rem;
  height: 17.25rem;
}

.pos_12 {
  position: absolute;
  left: 4.88rem;
  top: 39.75rem;
}

.group {
  opacity: 0.64;
}

.space-x-74 > *:not(:first-child) {
  margin-left: 4.63rem;
}

.pos_5 {
  position: absolute;
  left: -17.22rem;
  right: -16.16rem;
  top: 20.63rem;
}

.group_2 {
  padding-top: 0.75rem;
  width: 28.91rem;
}

.image_5 {
  width: 28.88rem;
  height: 11.5rem;
}

.image_4 {
  filter: drop-shadow(0px 0px 0.031rem #c4d5ffd9);
  width: 28.81rem;
  height: 11.5rem;
}

.pos_6 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

.group_7 {
  margin-top: 10.63rem;
  width: 122rem;
}

.group_8 {
  padding-top: 1.5rem;
}

.image_11 {
  width: 70.88rem;
  height: 23.94rem;
}

.image_10 {
  filter: drop-shadow(0px 0px 0.031rem #c4d5ffd9);
  width: 70.88rem;
  height: 23.94rem;
}

.pos_10 {
  position: absolute;
  left: 0;
  top: 0;
}

.view {
  margin-top: -7.13rem;
}

.image_14 {
  width: 53.69rem;
  height: 13.38rem;
}

.image_13 {
  filter: drop-shadow(0px 0px 0.031rem #c4d5ffd9);
  width: 53.38rem;
  height: 13.56rem;
}

.pos_13 {
  position: absolute;
  right: 0;
  top: 0;
}

.image_6 {
  filter: drop-shadow(0px 0px 0.25rem #e3ebff94);
  width: 12.25rem;
  height: 10.81rem;
}

.pos_7 {
  position: absolute;
  left: 29.63rem;
  top: 23.5rem;
}

.image_8 {
  filter: drop-shadow(0px 0px 0.25rem #e3ebff94);
  width: 10.56rem;
  height: 8.38rem;
}

.pos_9 {
  position: absolute;
  left: 28rem;
  top: 27.88rem;
}

.image_2 {
  filter: drop-shadow(0px 0px 0.25rem #e3ebff94);
  width: 12.88rem;
  height: 10rem;
}

.pos_2 {
  position: absolute;
  left: 44.91rem;
  top: 17.13rem;
}

.image_12 {
  opacity: 0.28;
  filter: drop-shadow(0px 0px 0.031rem #c4d5ffd9);
  width: 32.69rem;
  height: 10.5rem;
}

.pos_11 {
  position: absolute;
  left: 29.59rem;
  bottom: 19.5rem;
}

.image_3 {
  width: 27.75rem;
  height: 26.19rem;
}

.pos_4 {
  position: absolute;
  left: 31rem;
  top: 19.38rem;
}

.section_2 {
  padding: 3.88rem 3rem 5.19rem;
  background-color: #ffffffe0;
  border-radius: 1.25rem;
  box-shadow: 0px 0px 1.13rem #deeaffe0;
  width: 25.31rem;
}

.pos_3 {
  position: absolute;
  right: 12.06rem;
  top: 17.13rem;
}

.text {
  color: #000000;
  font-size: 1.5rem;
  font-family: 思源黑体 CN;
  font-weight: 700;
  line-height: 1.44rem;
}

.group_3 {
  margin-top: 3rem;
  padding-left: 0.69rem;
  padding-right: 0.38rem;
}

.group_4 {
  padding: 0 0.38rem 0.25rem;
  border-bottom: solid 0.063rem #d3dae6;
}

.image_7 {
  width: 1rem;
  height: 1.31rem;
}

.font_1 {
  font-size: 1rem;
  font-family: 思源黑体 CN;
  line-height: 0.94rem;
}

.text_2 {
  margin-right: 12.5rem;
  color: #97a7c3;
}

.group_5 {
  padding: 2rem 0.38rem 0.38rem;
  border-bottom: solid 0.063rem #d3dae6;
}

.space-x-12 > *:not(:first-child) {
  margin-left: 0.75rem;
}

.image_9 {
  width: 1.06rem;
  height: 1.19rem;
}

.text_3 {
  margin-right: 13.63rem;
  color: #98a7c3;
}

.group_6 {
  padding-left: 0.38rem;
  padding-top: 1.13rem;
}

.space-x-4 > *:not(:first-child) {
  margin-left: 0.25rem;
}

.section_4 {
  border-radius: 0.19rem;
  width: 1.06rem;
  height: 1.06rem;
  border: solid 0.063rem #d3dae6;
}

.font_2 {
  font-size: 0.88rem;
  font-family: 思源黑体 CN;
  line-height: 0.81rem;
  margin-right: 200px;
}

.font_3 {
  font-size: 0.88rem;
  font-family: 思源黑体 CN;
  line-height: 0.81rem;
  margin-left: 200px;
}

.text_4 {
  color: #5e6b82;
}

.text_5 {
  color: #ff6511;
}

.text-wrapper {
  margin-top: 3.5rem;
  padding: 1rem 0 0.75rem;
  background-image: linear-gradient(87deg, #09adf9 0.3%, #4650fb 99.7%);
  border-radius: 1.44rem;
  box-shadow: 0px 0px 0.63rem #12a0f9e0;
  width: 19.19rem;
  margin-left: 60px;
}

.text_6 {
  color: #ffffff;
  font-size: 1.13rem;
  font-family: 思源黑体 CN;
  font-weight: 700;
  line-height: 1.06rem;
}
</style>